#search-replace-dialog {
  position: fixed;
  top: 0;
  right: 64px;
  min-width: 200px;
  max-width: calc(100vw - 10rem);
  box-sizing: border-box;
  z-index: 10000;
  background-color: white;
  box-shadow: 4px 5px 20px -6px rgba(0, 0, 0, .5);
  border: 1px solid hsla(0, 0%, 50%, .4);
  transition: opacity .25s;
  border-top: none;
  &:not(:focus-within):not(:hover) {
    opacity: .5;
  }
  &[data-type="replace"] button i {
    display: none;
  }
  > * {
    padding-right: .75em;
    display: flex;
    align-items: stretch;
    background-color: hsla(0, 0%, 50%, .1);
  }
  [data-type="content"] {
    flex: 1;
    display: flex;
    white-space: nowrap;
    > :not(:last-child) {
      margin-right: .5rem;
    }
    button {
      align-self: center;
    }
  }
  [data-type="input-wrapper"] {
    position: relative;
    display: flex;
    flex: 1;
  }
  textarea {
    resize: none;
    width: min-content;
    field-sizing: content;
    min-width: 10em;
    max-width: calc(100vw - 20rem);
    min-height: 1.3em;
    max-height: 10vh;
    line-height: 1.3em;
    padding: .25rem 1.5rem .25rem .5rem;
    margin: 0;
    border: none;
    background-color: white;
    font-weight: bold;
    white-space: pre; /* issue #1000 */
    color: currentColor; /* use the current theme's color instead of UserAgent's CSS */
    flex: 1;
    &:invalid {
      box-shadow: none; /* Firefox is weird */
    }
  }
  :disabled {
    opacity: .5;
  }

  /*********** actions ****************/

  [data-type="actions"] {
    flex: 0;
    display: flex;
    align-items: center;
    padding-left: .5em;
    opacity: .5;
    transition: opacity .25s;
    a:last-child {
      margin-right: -.5em;
    }
  }
  &:focus-within [data-type="actions"],
  [data-type="actions"]:hover {
    opacity: 1;
  }
  [data-action] {
    display: block;
    padding: 2px;
  }

  /*********** case-sensitivity ****************/

  [data-action="case"] {
    text-decoration: none;
    font-weight: bold;
    color: currentColor;
    cursor: pointer;
    padding: 0 .5em;
    line-height: 20px;
    display: block;
    position: relative;
    &[data-enabled]::after {
      content: "";
      left: 0;
      right: 0;
      bottom: 0;
      position: absolute;
      border-color: hsla(180, 100%, 30%, .5);
      border-style: none none solid none;
      border-width: 4px;
    }
    &:hover {
      text-decoration: underline;
    }
  }

  /*********** clear input ****************/

  textarea:not(:valid) + [data-type="hover"] {
    opacity: 0;
    pointer-events: none;
  }
  [data-type="hover"] {
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    right: 4px;
    bottom: 0;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s;
  }
  &:hover [data-type="hover"] {
    opacity: 1;
    pointer-events: auto;
  }
  [data-action="clear"] {
    padding: 3px;
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: hsla(0, 0%, 100%, .75);
  }
  [data-type="status"] {
    background-color: hsla(0, 0%, 50%, .2);
    padding-top: 2px;
    padding-left: .5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  [data-type="tally"] {
    opacity: .5;
    margin-left: 1em;
    &:hover {
      opacity: 1;
    }
  }
}

/*********** CM search highlight restyling, which shouldn't need color variables ****************/
body.find-open {
  .search-target-editor {
    box-shadow: 0 0 0 1px hsl(33, 100%, 50%), 0 0 3px hsla(33, 100%, 50%, .4);
    /* same as our global.css focus rule */
  }
  .cm-searching {
    background-color: rgba(255, 255, 0, .4);
    &.search-target-match {
      background-color: darkorange;
      color: black;
    }
  }
  .CodeMirror-search-match {
    background: gold;
    border-top: 1px solid orange;
    border-bottom: 1px solid orange;
  }
}
/* hide default CM search highlight styling */
body .cm-searching,
body .CodeMirror-search-match {
  background-color: transparent;
  border-color: transparent;
}

@media (max-width: 500px) {
  #search-replace-dialog {
    left: 0;
    right: 0;
    max-width: none;
    textarea {
      min-width: 50px;
      max-width: calc(100vw - 8rem);
    }
  }
}

@media (max-width: 800px) {
  #search-replace-dialog[data-type="replace"] {
    left: 0;
    right: 0;
    max-width: none;
    button {
      &:not(.hidden) {
        display: none !important;
      }
      &.hidden {
        display: block !important;
        border: none;
        background: none;
        font-size: 0;
        width: 24px;
        text-align: center;
        cursor: pointer;
      }
      i {
        display: inline;
      }
    }
    textarea {
      min-width: 50px;
      max-width: calc(50vw - 120px);
      width: auto;
    }
  }
}
